<template>
    <require from="./em-chat-msg.css"></require>
    <div class="em-chat-msg" show.bind="actived.show == 'msg'">
        <div class="ui basic segment minimal selection list segment comments">
            <h1 show.bind="!chats.length" class="ui center aligned header">${actived.nodata}</h1>
            <div repeat.for="item of chats" mouseleave.trigger="searchItemMouseleaveHandler(item)" mouseenter.trigger="searchItemMouseenterHandler(item)" fancybox class="comment item ${item.id == markId ? 'active' : ''}" data-id="${item.id}">
                <em-user-avatar user.bind="item.creator" search-on.bind="!0"></em-user-avatar>
                <div class="content">
                    <a class="author" data-value="${item.creator.username}">${item.creator.name}</a>
                    <div class="metadata">
                        <i if.bind="item.ua" class="${item.ua | ua} icon large" style="margin-right: 0;" title="发自于${item.ua | ua2}"></i>
                        <div class="date" style="cursor: pointer;" dblclick.delegate="dateDblclickHandler(item)" data-timeago="${item.createDate}" title="${item.createDate | date}">${item.createDate | timeago}</div>
                    </div>
                    <div ref="mkbodyRef" class="text markdown-body fr-view ${item.isOpen ? 'tms-open' : ''}" innerhtml.bind="item.content | parseMd:channel | emoji:mkbodyRef"></div>
                    <div class="actions">
                        <div if.bind="item.chatStow" ui-dropdown-action style="margin-right: 5px;" class="ui icon top left pointing dropdown" title="移除消息收藏">
                            <i class="large icons"><i class="empty star icon"></i><i class="corner red remove icon"></i></i>
                            <div class="menu">
                                <div style="color: red;" class="item" click.delegate="removeStowHandler(item)"><i class="trash outline icon"></i>确认移除</div>
                            </div>
                        </div>
                        <div if.bind="item.chatPin" ui-dropdown-action style="margin-right: .75em;" class="ui icon top left pointing dropdown" title="解除消息固定">
                            <i class="large icons"><i class="pin icon"></i><i class="corner red remove icon" style="right: -3px;"></i></i>
                            <div class="menu">
                                <div style="color: red;" class="item" click.delegate="removePinHandler(item)"><i class="trash outline icon"></i>确认解除</div>
                            </div>
                        </div>
                        <a if.bind="item.chatAt.chatReply" click.delegate="gotoChatReplyParentHandler(item)" class="tms-goto" title="定位到父消息" href=""><i class="large arrow alternate circle up outline icon"></i></a>
                        <a if.bind="item.chatAt" click.delegate="removeAtHandler(item)" class="tms-read" title="标记@消息已读" href=""><i class="large icons"><i class="at icon"></i><i class="corner remove red icon"></i></i></a>
                        <a click.delegate="gotoChatHandler(item, $event)" class="tms-goto" href="" title="定位到消息${item.chatAt ? '(同时按下shift键可标记已读)' : ''}"><i class="large crosshairs icon"></i></a>
                        <!-- <a click.delegate="gotoChatHandler(item)" class="tms-goto" href="" title="定位到消息"><i class="large crosshairs icon"></i></a> -->
                        <a class="tms-copy tms-clipboard" data-clipboard-text="${item.content}" title="复制消息内容到剪贴板"><i class="copy icon large"></i></a>
                        <a class="tms-share tms-clipboard" data-clipboard-text="${basePath + '#/chat/' + (isAt ? ('@' + loginUser.username) : channel.name) + '?id=' + item.id}" title="复制消息链接到剪贴板"><i class="share alternate icon large"></i></a>
                    </div>
                </div>
                <div class="tms-footer ${item.chatLabels.length > 0 ? 'tms-has' : ''} ${item.isOpen ? 'tms-open' : ''}">
                    <em-chat-content-item-footbar chat.bind="item" last.bind="$last" last-pre.bind="(chats.length > 1) && ($index == chats.length - 2)"></em-chat-content-item-footbar>
                </div>
                <div class="tms-btn-open-search-item" click.delegate="openSearchItemHandler(item)">
                    <i title="${item.isOpen ? '点击收起 (o)' : '点击展开 (o)'}" class="angle double ${item.isOpen ? 'up' : 'down'} large icon"></i>
                </div>
            </div>
            <div if.bind="!last" click.delegate="searchMoreHandler()" class="ui basic button tms-search-more ${searchMoreP && searchMoreP.readyState != 4 ? 'tms-disabled2' : ''}"><i show.bind="searchMoreP && searchMoreP.readyState != 4" class="spinner loading icon"></i> 加载更多(${moreCnt})</div>
        </div>
    </div>
</template>
